<template>
  <transition-force name="fade">
    <div class="com-mask">
      <div class="dialog">
        <main>
          <div class="title">{{ title }}</div>
          <div class="content color-subtext">{{ content }}</div>
        </main>
        <div class="btns flex-row flex-between">
          <div class="btn color-subtext" @click="$emit('cancel')">取消</div>
          <div class="btn color-theme" @click="$emit('check')">确定</div>
        </div>
      </div>
    </div>
  </transition-force>
</template>

<script>
export default {
  props: ['title', 'content'],

  data (){
    return {
      
    }
  },

  methods: {
      
  }
}
</script>

<style lang="less" scoped>
.dialog{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 30px 20px;
  padding-bottom: 0;
  box-sizing: border-box;
  width: 80%;
  border-radius: 15px;
}



main{
  margin-bottom: 20px;
  
  .title, .content{
    margin-bottom: 10px;
    text-align: center;
  }
  
  .title{
    font-size: 18px;
  }
}

.btns{
  height: 50px;
  border-top: 1px #eee solid;
  width: calc(~'100% + 40px');
  margin-left: -20px;
}

.btn{
  display: inline-block;
  padding: 7px 30px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;

  &:first-child{
    border-right: 1px #eee solid;
  }
}
</style>